<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="ipt" />
  <script>
    const oIpt = document.getElementById("ipt");
    /* 
      防抖:
        希望核心代码一段时间之后执行,如果被打断,则重新计时
    */

    //核心代码
    function center (e) {
      console.log(1, this, e);
    }

    oIpt.oninput = debounce(center, 2000);

    //防抖函数
    function debounce (fn, time) {
      let timer = null;
      //这个是真正的事件函数
      return function (e) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.call(this, e);
        }, time);
      };
    }
  </script>
</body>

</html>